<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05_员工列表练习</title>
</head>
<body>
<input type="text" placeholder="请输入员工姓名" id= "name">
<input type="text" placeholder="请输入员工工资" id="salary">
<input type="text" placeholder="请输入员工岗位" id="post">
<button onclick="add()">点我添加</button>
<hr>
<table border="1">
   <caption>员工列表</caption>
    <tr>
        <th>员工姓名</th>
        <th>员工工资</th>
        <th>员工岗位</th>
    </tr>
</table>
<script>
    //创建一个空的数组
    var arr = [];
    function add() {
        //获取输入的数据
        let name = document.getElementById("name").value;
        let salary = document.getElementById("salary").value;
        let post = document.getElementById("post").value;
        if (name.trim() == "" || salary.trim() == "" || post.trim() == "") {
            alert("请输入数据");
            return;
        }
        //创建tr
        let tr = document.createElement("tr");
        //创建td1
        let td1 = document.createElement("td");
        td1.innerHTML = name;
        //创建td2
        let td2 = document.createElement("td");
        td2.innerHTML =salary;
        //创建td3
        let td3 = document.createElement("td");
        td3.innerHTML =post;
        //获取页面中table元素
        let table = document.querySelector("table");
        //tr添加td
        tr.append(td1,td2,td3);
        //添加到table
        table.append(tr);

        //把输入的数据保存到一个对象中
        let obj = {
            name: name,
            salary: salary,
            post: post
        }
        arr.push(obj);
        //清空输入框
        document.getElementById("name").value = "";
        document.getElementById("salary").value = "";
        document.getElementById("post").value = "";
        // show();
    }
    // function show() {
    //     let table = document.querySelector("table");
    //     //删除table中的所有行
    //     while(table.rows.length > 1) {
    //         table.deleteRow(1);
    //     }
    //
    //     for (let i = 0; i < arr.length; i++) {
    //         let tr = document.createElement("tr");
    //         let td1 = document.createElement("td");
    //         td1.innerHTML = arr[i].name;
    //         let td2 = document.createElement("td");
    //         td2.innerHTML = arr[i].salary;
    //         let td3 = document.createElement("td");
    //         td3.innerHTML = arr[i].post;
    //         tr.append(td1,td2,td3);
    //         //添加到table
    //         table.append(tr);
    // //     }
    // }


</script>
</body>
</html>